<template>
  <div class="app-container">

<!--    <div style="margin-top: 20px; height: 200px;">-->
<!--      <el-collapse-transition>-->
<!--        <div v-show="show3">-->
<!--          <div class="transition-box">el-collapse-transition</div>-->
<!--          <div class="transition-box">el-collapse-transition</div>-->
<!--        </div>-->
<!--      </el-collapse-transition>-->
<!--    </div>-->
      <template v-for="(item, index) in vaAccount.digital" >
            <div style="background-color: #f3f3f3;color:#464652;width: 100%;border:1px solid #d3cece;border-radius: 10px;margin-top: 10px;padding-left: 20px">
              <div style="position:relative; height: 80px;display: flex;align-items: center;" @click="onShow(index)" >
                <template v-if="item.bankName =='TRC20' ">
                  <img src="@/assets/va/tron.png"  width="40">
                </template>
                <template v-if="item.bankName =='ERC20' ">
                  <img src="@/assets/va/eth.png" width="40">
                </template>
                <div style="margin-left: 15px;width: 100%">
                  <div>
                    {{ item.currency }}-{{ item.bankName}}
                  </div>
                  <div>
                    ${{ vaAccount.balance[item.currency]}}
                  </div>
                </div>
                <i style="margin-right: 30px" v-if="!item.show" class="el-icon-caret-bottom"></i>
                <i style="margin-right: 30px" v-if="item.show" class="el-icon-caret-top"></i>
              </div>
              <el-collapse-transition>
                <div v-show="item.show" style="margin-top: 15px;font-size: 18px;">
                  <p>
                    充值地址
                  </p>
                  <p>
                    {{item.accountNo}}
                  </p>
                  <p>
                    二维码
                  </p>
                  <div v-bind:id="item.qrcodeId" style="margin: 12px">
                  </div>
                </div>
              </el-collapse-transition>
            </div>


      </template>
  </div>
</template>

<script>
import {singleAccount} from "@/api/fusion/mchva";
import QRCode from 'qrcodejs2'
export default {
  name: "bison-digital",
  data() {
    return {
      activeIndex: 0,
      loading: false,
      vaAccount: '',
      show3: false
    };
  },
  created() {
    this.getList();
  },
  components: { QRCode },
  methods: {
    onShow(index) {
      // this.show3 = !this.show3
      let item = this.vaAccount.digital[index]
      item.show = !item.show
      this.$nextTick(()=> {
        if (item.qrcode) {
          item.qrcode.clear();
          item.qrcode.makeCode(text);
        } else {
          item.qrcode = new QRCode(item.qrcodeId, {
            text: item.accountNo,
            width: 160,
            height: 160,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          });
        }
      })
    },
    getList() {
      this.loading = true;
      this.vaAccount = {'digital': []}
      singleAccount('bison').then(response => {
        for(let i = 0; i <  response.data.digital.length; i++) {
          let d = response.data.digital[i];
          d.show = false
          d.qrcodeId = 'qrcode' + i
        }
        this.vaAccount = response.data
      });
    }
  }
};
</script>
